<template lang="pug">
.center-index
  .panel
    .panel-header
      p.header 我的提醒
    .panel-body
      .row
        .col-md-10
          .notice-item
            i.fa.fa-clock-o.fa-2x.red
            span 开会
          .notice-item
            i.fa.fa-hourglass-half.fa-2x.green
            span 开会
          .notice-item
            i.fa.fa-hourglass-end.fa-2x.beige
            span 阅读javascript高级程序设计

  .panel
    .panel-header
      p.header 优站收藏夹
      p.more 更多
    .panel-body
      .collect-list
        .collect-item(v-for="i in 14", :key="i")
          img(src="http://via.placeholder.com/80x80" )
          span 开会

  .panel
    .panel-header
      p.header 读书
    .panel-body
      .books-list
        .book-item(v-for="i in 10", :key="i")
          img(src="http://via.placeholder.com/120x160" )
          span 读书
  .panel
    .panel-header
      p.header 文章
      p.more 更多
    .panel-body
      .article-list
        .article-item(v-for="i in 3", :key="i")
          img(src="http://via.placeholder.com/100x100")
          .article
            p.title
              b Javascript 高级进阶程序设计
                small 12 hour ago
            p.abstract 关于javascript 封装集成多台到收款方式斯诺伐克的萨达付款撒撒关于javascript 封装集成多台到收款方式斯诺伐克的萨达付款撒撒
            .tools
              i.fa.fa-heart-o
              i.fa.fa-commenting-o
              i.fa.fa-share
  .panel
    .panel-header
      p.header 圈子
    .panel-body
      .circle-list
        .circle-item
          img(src="http://via.placeholder.com/350x200")
        .circle-item
          img(src="http://via.placeholder.com/350x200")

  .panel
    .panel-header
      p.header 项目
    .panel-body
      .project-list
        .project-item
          i.fa.fa-picture-o
          h3 Jackson 采用了我的图片
        .project-item
          i.fa.fa-file
          h3 Jackson 采用了我的图片设计司徒雅瑟
        .project-item
          i.fa.fa-file
          h3 Jackson 采用了我的图片设计司徒雅瑟
        .project-item
          i.fa.fa-file
          h3 Jackson 采用了我的图片设计司徒雅瑟
</template>
<script>
export default {
  data () {
    return {
      notices: [],
      books: [],
      articles: [],
      projects: [],
      circles: []
    }
  }
}
</script>
